html {
  .gant-layout {
    .ant-steps {
      color: var(--text-color);
      font-size: var(--font-size-base);
      font-variant: var(--font-variant-base);
      line-height: var(--line-height-base);
      -webkit-font-feature-settings: var(--font-feature-settings-base);
      font-feature-settings: var(--font-feature-settings-base);
    }

    .ant-steps-item-icon {
      font-size: var(--font-size-lg);
      font-family: var(--font-family);
      border: var(--border-width-base) var(--border-style-base)
        var(--disabled-color);
    }

    .ant-steps-item-icon > .ant-steps-icon {
      color: var(--primary-color);
    }

    .ant-steps-item-tail::after {
      background: var(--border-color-split);
    }

    .ant-steps-item-title {
      color: var(--text-color);
      font-size: var(--font-size-lg);
    }

    .ant-steps-item-title::after {
      top: calc(var(--steps-icon-size) / 2);
      background: var(--border-color-split);
    }

    .ant-steps-item-subtitle {
      color: var(--text-color-secondary);
      font-size: var(--font-size-base);
    }

    .ant-steps-item-description {
      color: var(--text-color-secondary);
      font-size: var(--font-size-base);
    }

    .ant-steps-item-wait .ant-steps-item-icon {
      background-color: var(--component-background);
      border-color: var(--disabled-color);
    }

    .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
      color: var(--disabled-color);
    }

    .ant-steps-item-wait
      .ant-steps-item-icon
      > .ant-steps-icon
      .ant-steps-icon-dot {
      background: var(--disabled-color);
    }

    .ant-steps-item-wait
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title {
      color: var(--text-color-secondary);
    }

    .ant-steps-item-wait
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item-wait
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-description {
      color: var(--text-color-secondary);
    }

    .ant-steps-item-wait
      > .ant-steps-item-container
      > .ant-steps-item-tail::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item-process .ant-steps-item-icon {
      background-color: var(--component-background);
      border-color: var(--primary-color);
    }

    .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
      color: var(--primary-color);
    }

    .ant-steps-item-process
      .ant-steps-item-icon
      > .ant-steps-icon
      .ant-steps-icon-dot {
      background: var(--primary-color);
    }

    .ant-steps-item-process
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title {
      color: var(--heading-color);
    }

    .ant-steps-item-process
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item-process
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-description {
      color: var(--text-color);
    }

    .ant-steps-item-process
      > .ant-steps-item-container
      > .ant-steps-item-tail::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item-process .ant-steps-item-icon {
      background: var(--primary-color);
    }

    .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
      color: var(--text-color-inverse);
    }

    .ant-steps-item-finish .ant-steps-item-icon {
      background-color: var(--component-background);
      border-color: var(--primary-color);
    }

    .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon {
      color: var(--primary-color);
    }

    .ant-steps-item-finish
      .ant-steps-item-icon
      > .ant-steps-icon
      .ant-steps-icon-dot {
      background: var(--primary-color);
    }

    .ant-steps-item-finish
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title {
      color: var(--text-color);
    }

    .ant-steps-item-finish
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title::after {
      background-color: var(--primary-color);
    }

    .ant-steps-item-finish
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-description {
      color: var(--text-color-secondary);
    }

    .ant-steps-item-finish
      > .ant-steps-item-container
      > .ant-steps-item-tail::after {
      background-color: var(--primary-color);
    }

    .ant-steps-item-error .ant-steps-item-icon {
      background-color: var(--component-background);
      border-color: var(--error-color);
    }

    .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon {
      color: var(--error-color);
    }

    .ant-steps-item-error
      .ant-steps-item-icon
      > .ant-steps-icon
      .ant-steps-icon-dot {
      background: var(--error-color);
    }

    .ant-steps-item-error
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title {
      color: var(--error-color);
    }

    .ant-steps-item-error
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-title::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item-error
      > .ant-steps-item-container
      > .ant-steps-item-content
      > .ant-steps-item-description {
      color: var(--error-color);
    }

    .ant-steps-item-error
      > .ant-steps-item-container
      > .ant-steps-item-tail::after {
      background-color: var(--border-color-split);
    }

    .ant-steps-item.ant-steps-next-error .ant-steps-item-title::after {
      background: var(--error-color);
    }

    .ant-steps
      .ant-steps-item:not(.ant-steps-item-active)
      > .ant-steps-item-container[role="button"]:hover
      .ant-steps-item-title,
    .ant-steps
      .ant-steps-item:not(.ant-steps-item-active)
      > .ant-steps-item-container[role="button"]:hover
      .ant-steps-item-subtitle,
    .ant-steps
      .ant-steps-item:not(.ant-steps-item-active)
      > .ant-steps-item-container[role="button"]:hover
      .ant-steps-item-description {
      color: var(--primary-color);
    }

    .ant-steps
      .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
      > .ant-steps-item-container[role="button"]:hover
      .ant-steps-item-icon {
      border-color: var(--primary-color);
    }

    .ant-steps
      .ant-steps-item:not(.ant-steps-item-active):not(.ant-steps-item-process)
      > .ant-steps-item-container[role="button"]:hover
      .ant-steps-item-icon
      .ant-steps-icon {
      color: var(--primary-color);
    }

    .ant-steps-item-custom.ant-steps-item-process
      .ant-steps-item-icon
      > .ant-steps-icon {
      color: var(--primary-color);
    }

    .ant-steps-small .ant-steps-item-icon {
      font-size: var(--font-size-sm);
    }

    .ant-steps-small .ant-steps-item-title {
      font-size: var(--font-size-base);
    }

    .ant-steps-small .ant-steps-item-description {
      color: var(--text-color-secondary);
      font-size: var(--font-size-base);
    }

    .ant-steps-dot .ant-steps-item-title,
    .ant-steps-dot.ant-steps-small .ant-steps-item-title {
      line-height: var(--line-height-base);
    }

    .ant-steps-dot .ant-steps-item-tail,
    .ant-steps-dot.ant-steps-small .ant-steps-item-tail {
      margin: 0 0 0 calc(var(--steps-desciption-max-width) / 2);
    }

    .ant-steps-navigation .ant-steps-item::before {
      background-color: var(--primary-color);
    }

    .ant-steps-flex-not-supported.ant-steps-horizontal.ant-steps-label-horizontal
      .ant-steps-item {
      background: var(--component-background);
    }

    .ant-steps-flex-not-supported.ant-steps-dot
      .ant-steps-item
      .ant-steps-icon-dot::before,
    .ant-steps-flex-not-supported.ant-steps-dot
      .ant-steps-item
      .ant-steps-icon-dot::after {
      background: var(--component-background);
    }
  }
}
